{% load humanize %}
{% load firecares_tags %}
{% load compress %}
{% load favit_tags %}
<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="{{ object.description }} Learn more about this fire station.">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Firestation detail: {{ object.name }}</title>
    {% include 'firestation/_favicon.html' %}
    {% include "firestation/_firecares_style.html" %}

    <script type="text/javascript">
    var config = {
        geom: {{ object.geom.json|safe|default:"null" }},
        stationName: "{{ object.name|default:'Station' }}",
        district: {{ object.district.json|safe|default:"null" }},
        headquarters: {{ object.department.headquarters_geom.json|safe|default:"null" }},
        headquartersName: "{{ object.department.name }} Headquarters",
        id: {{object.id}},
        departmentId: {{ object.department_id|default:"null" }},
        draggable: {{ user_can_change|yesno:"true,false" }},
        isCurator: {{ user_can_change|yesno:"true,false" }}
    };
    </script>
    {% include 'google_analytics.html' %}

    <style>
    .firestationDetail .ct-formSearch--extended {
        background-color:#fff;
    }
    .firestationDetail .form-control {
      border: 2px solid #fff;
      background-color: #eee;
    }
    .firestationDetail .select2-container .select2-choice .select2-arrow {
      border-left: 2px solid #ddd;
      color: #000;
    }
    .firestationDetail .slider.slider-horizontal .slider-handle {
      border: 4px solid #ddd;
    }
    .firestationDetail .slider.slider-horizontal .slider-track {
      background: #ddd;
    }

    .editable-buttons span {
        line-height: 1 !important;
        padding: 0px;
    }

    .editable-buttons button {
        padding: 1px 5px;
    }

    .editable-controls label {
        line-height: 50px;
        margin-right: 10px;
    }

    .editable-buttons .btn-primary {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .editable-buttons .btn-primary:hover {
        background-color: darkolivegreen;
        border-color: darkolivegreen;
    }

    .editable-buttons .btn-default:hover {
        background-color: #cd412c;
        border-color: #cd412c;
    }

    .ct-u-displayTableCell .popover-wrapper form {
        top: -83px;
    }
    </style>
</head>

<body class="ct-headroom--fixedTopBar cssAnimate fire-station" ng-controller="fireStationController" ng-app="fireStation">

{% include 'firestation/_mobile_navbar.html' %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

{% include "firestation/_navbar.html" %}

<div class="ct-site--map">
    <div class="container">
        <a href="{% url 'firestation_home' %}">Home</a>
        {% if object.department %}
        <a href="{% url 'firedepartment_detail_slug' object.department_id object.department.slug %}">{{ object.department }}</a>
        {% endif %}
        <a href="{% url 'firestation_detail_slug' object.id object.slug %}">{{ object.name }}</a>
    </div>
</div>
<header class="ct-mediaSection">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="ct-u-displayTableVertical">
                <div class="ct-textBox ct-u-text--white ct-u-displayTableCell text-left">
                    <h2>{{ object.name }}</h2>
                    <h4>{{ object.station_address.get_full_display }}</h4>
                    <span class="ct-productID ct-fw-300">
                        FDID: <span>{{ object.fdid|default:'Unknown' }}</span>
                    </span>
                </div>
                <div class="ct-u-displayTableCell text-right">
                    {% favorite_button object %}
                    <a href="javascript:window.print()" class="btn btn-sm btn-transparent–border ct-u-text--white"><i class="icon-printer fa-2x"></i></a>
                    {% if user.is_authenticated %}
                        <feedback
                            class="btn btn-sm btn-transparent–border "
                            url="{%url 'firestation_data_feedback_slug' object.id object.slug %}"
                            user="{{ user.id }}""
                            firedepartment="{{ object.department.id }}"
                            firestation="{{ object.id }}"
                            csrftoken="{{ csrf_token }}"
                            analytics-on="click"
                            analytics-event="Click"
                            {% verbatim %}
                            analytics-category="{{eventCategory}}"
                            event-category="{{eventCategory}}"
                            {% endverbatim %}
                            analytics-label="Feedback Button"
                            >
                            <i class="fa fa-bullhorn  fa-2x ct-u-text--white"></i>
                        </feedback>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</header>
<section class="ct-u-paddingBottom60">
    <div class="container">
        {% include 'firestation/_message_notifications.html' with use_angular=True %}
        <div class="ct-productMeta--single ">
            <div class="row">
                <div class="col-md-8 col-lg-9">
                    <div class="ct-u-displayTableVertical">
                        <div class="ct-u-displayTableCell text-left">
                            <i class="fa fa-clock-o"></i><h6>Last Updated: {{ object.modified }}</h6>
                        </div>
                        <div class="ct-u-displayTableCell text-right">
                            {% if user.is_authenticated %}
                                <feedback
                                    class="usgs-update-link"
                                    url="{%url 'firestation_data_feedback_slug' object.id object.slug %}"
                                    user="{{ user.id }}""
                                    firedepartment="{{ object.department.id }}"
                                    firestation="{{ object.id }}"
                                    csrftoken="{{ csrf_token }}"
                                    analytics-on="click"
                                    analytics-event="Click"
                                    {% verbatim %}
                                    event-category="{{eventCategory}}"
                                    analytics-category="{{eventCategory}}"
                                    {% endverbatim %}
                                    analytics-label="Feedback Button"
                                >
                                    <i class="fa fa-bullhorn"></i>  Feedback
                                </feedback>
                            {% endif %}
                            <a href="" class="usgs-update-link" ng-click="toggleFullScreenMap()"><i class="fa fa-arrows-alt"></i> View Fullscreen Map</a>
                            {% if user_can_change %}
                                <div class="dropdown pull-right">
                                    <a href="" class="usgs-update-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        <i class="fa fa-cog"></i>
                                        Tools
                                    </a>
                                    <ul class="dropdown-menu in-front" aria-labelledby="dropdownMenu1">
                                        <li>
                                            <a href="{% url 'firestation_boundary_shapefile' object.id object.slug %}">
                                                <i class="fa fa-download"></i>
                                                Download District Boundary
                                                <span class="format">(shp)</span>
                                            </a>
                                        </li>
                                        {% if user.is_superuser %}
                                        <li>
                                            <a href="" ng-click="toggleBoundary()" ng-class="{active: shp !== null}">
                                                <i class="fa fa-cloud-upload"></i>
                                                Upload Boundary
                                            </a>
                                        </li>
                                        <li>
                                        <a href="{% url 'admin:firestation_firestation_change' object.id %}" target="_blank">
                                            <i class="fa fa-cogs"></i>
                                            Access Department Admin Page
                                        </a>
                                    </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    {% if user.is_superuser %}
                        <div class="ng-cloak">
                            <div ng-show="shp">
                                <form name="boundaryUpload">
                                    <input class="hide" type="file" name="newBoundary" onchange="angular.element(this).scope().processBoundaryShapefile(this.files[0])"/>
                                    <a href="" class="commit" ng-click="commitBoundary()">Save updated boundary</a>
                                    <a href="" ng-click="cancelBoundary()">Cancel</a>
                                </form>
                            </div>
                        </div>
                    {% endif %}
                </div>
 <!--                <div class="col-md-4 col-lg-3 text-right">
                    <a href=""><i class="fa fa-times"></i>report abuse</a>
                </div> -->
            </div>
        </div>
        <div class="ct-section--products">
            <div class="row">
                <div class="col-md-8 col-lg-9">
                    <div class="ct-gallery">
                        <div id="map"></div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="ct-heading ct-u-marginBottom20">
                        <h3>Details</h3>
                    </div>

                    <div class="ct-u-displayTableVertical ct-productDetails firestationDetail">
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">Name</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" e-required editable-text="station.name">
                                            {{ station.name}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.name}}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">Number</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-text="station.station_number">
                                            {{ station.station_number}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.station_number }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>

                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">Address</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-text="station.address" e-title="Address?">
                                            {{ station.address}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.address }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">City</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-text="station.city">
                                            {{ station.city}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.city }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">Zip</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-text="station.zipcode">
                                            {{ station.zipcode}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.zipcode }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">State</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-text="station.state">
                                            {{ station.state}}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.state }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="ct-u-displayTableRow">
                            <div class="ct-u-displayTableCell">
                                <span class="ct-fw-600">Status</span>
                            </div>
                            <div class="ct-u-displayTableCell text-right">
                                <span style="line-height: 10px;">
                                    {% if user_can_change %}
                                        {% verbatim %}
                                          <div class="popover-wrapper" style="line-height: 1;">
                                            <a href="#" onaftersave="updateStation()" editable-checkbox="station.archived" e-title="Archive?">
                                            {{ station.archived && "Archived" || "Active" }}
                                        </a>
                                          </div>
                                        {% endverbatim %}
                                    {% else %}
                                        {{ object.archived|yesno:"Archived,Active"  }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% if user.is_authenticated %}
            <div class="row">
                <div class="col-md-12">
                    <div class="apparatus">
                        <hr/>
                        <h4>Apparatus and Staffing</h4>
                        <div ng-if="canModifyApparatuses" class="ng-cloak ct-u-marginTop20">
                            {% verbatim %}
                            <div class="alert" ng-cloak id="response-capability-message" ng-class="'alert alert-' + message.message_class" ng-if="message.message">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                {{ message.message }}
                            </div>
                            <p><strong><em>Department and station administrators and curators, please make sure your apparatus information is accurate.</em></strong></p>
                            <ul class="nav nav-tabs apparatus-tabs">
                                <li id="tab-{{ form.id }}" ng-repeat="form in forms" ng-class="{'active': $last}">
                                    <a href="#{{ form.id }}" data-toggle="tab">{{ form.apparatus }} </a>
                                </li>
                                <li ng-click="AddForm()" id="" class="nav-action" data-toggle="tab">Add Apparatus</li>
                            </ul>
                            {% endverbatim %}
                            {% include "firestation/_response_capability_inline.html" %}
                        </div>
                        {% verbatim %}
                        <div ng-if="!canModifyApparatuses" class="ng-cloak ct-u-marginTop20 well">
                            <div ng-if="forms.length">
                                <p>This station has <strong>{{ forms.length }}</strong> staffed apparatuses:</p>
                                <ul>
                                    <li ng-repeat="form in forms">
                                        <strong>{{ form.apparatus }}</strong>: staffed with <strong>{{ form.personnel }}</strong> personnel
                                        <span ng-if="form.als">and also <strong>provides Advanced Life Support</strong></span>
                                    </li>
                                </ul>
                            </div>
                            <div ng-if="!forms.length">
                                <p class="text-center no-apparatus"><strong>This fire station currently does not have any apparatus information available.</strong></p>
                            </div>
                        </div>
                        {% endverbatim %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>

{% include 'firestation/_footer.html' %}
</div>

{% include "firestation/_firecares_scripts.html" %}
</body>
</html>
